<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/nft.ico" />
    <title>测试 json 维护工具</title>
    <!-- vue3 -->
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
    <!-- element-plus 的 css -->
    <link href="https://unpkg.com/element-plus@2.0.6/dist/index.css" rel="stylesheet"/>
    <!-- element-plus -->
    <script src="https://unpkg.com/element-plus@2.0.6/dist/index.full.js"></script>
    <!-- ui-core 
    <script src="https://unpkg.com/@naturefw/ui-core@0.1.3/dist/nf-ui-core.umd.js"></script>
    -->
    <script src="/script/nf-ui-core.umd.js"></script>
    <!-- ui-elp -->
    <script src="https://unpkg.com/@naturefw/ui-elp@0.1.5/dist/nf-ui-elp.umd.js"></script>
    <!-- nf-tool-->
    <script src="https://unpkg.com/@naturefw/nf-tool@0.0.6/dist/nfTool.umd.js"></script>
    <!-- help -->
    <script src="/script/nf-meta-help.umd.js"></script>
    
    <style>
      body {
        background-color:#f5f2ed;
      }
      #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: left;
        color: #2c3e50;
        background-color: #f5f2ed;
        margin: 0px;
      }
      .el-header{
        background-color: #545a5f;
        color: #f5f2ed;
        text-align: left;
      }
      .el-footer {
        background-color: #7e8285;
        color: #f5f2ed;
        text-align: left;
      }
      
      .el-aside {
        background-color: #6c747c;
        color: var(--el-text-color-primary);
        text-align: left;
      }
      
      .el-main {
        background-color: #f5f2ed;
        color: var(--el-text-color-primary);
        text-align: left;
        padding: 5px;
      }
      
      </style>
  
  </head>
  <body style="margin: 20px;">
    <div id="app">
      <el-container>
        <el-header>
          <!--导航-->
          <div style="float: left;">
            <!--写网站logo、标题等-->
            <h1> 测试CDN模式的文档 </h1>
          </div>
          <div style="float: right;min-width: 100px;height: 60px;padding-top: 13px;">
            <!--写网站logo、标题等-->
            nf-meta-help
          </div>
          <div style="float: right;min-width: 500px;height: 60px;">22
            <!--网站导航-->
            导航
          </div>
        </el-header>
        <el-container>
          <!--左侧边栏-->
          <el-aside width="330px">
            菜单
          </el-aside>
          <el-main>
            main<br>
            <el-button @click="setMeta">设置 基础控件 属性</el-button><br>

            文本框：
            <nf-text v-model="model.test" v-bind="textProps"
            >
            </nf-text><br>
            <el-input v-model="model.test" v-bind="textProps"
            >
            </el-input><br>
            {{textProps}}<br>
            {{drawerInfo}}
            <hr>
            <nf-button
              v-bind="buttonMeta"
              :componentKind="componentKind"
              :active="active"
              :moduleId="moduleId"
            >
            </nf-button><br>
          </el-main>
        </el-container>
      </el-container>
      <help-text
        :drawer-info="drawerInfo"
        :meta="textProps"
      >
      </help-text>
    </div>
    
    <script>
      const { reactive, ref, onMounted } = Vue
      // 设置 indexedDB 数据库，存放文档的各种信息。
      const { helpText } = nfMetaHelp

      const App = {
        components: {
          helpText
        },
        setup () {
          const message = '做个目录'
                
          const itemProps = reactive({
            'inline-prompt': true,
            'active-text': '看',
            'inactive-text': '写',
            'active-color': '#378FEB',
            'inactive-color': '#EA9712'
          })
          
          // 设置表单值
          const model = reactive({
            test: ''
          })
          // 设置控件的meta
          const textProps = reactive({
            colName: 'test',
            kind: 10,
            controlType: 101
          })

          // 控制抽屉的展开收拢
          const drawerInfo = reactive({
            isShow: true
          })
          
          const setMeta = () => {
            drawerInfo.isShow = true
          }

          // 按钮
          const moduleId = new Date().valueOf()
          const buttonMeta = {
            "moduleId": 142,
            "btnOrder": [10, 20, 30, 31, 80],
            "itemMeta": {
              "10": {
                "btnTitle": "添加测试",
                "btnKind": "add",
                "dialogTitle": "添加测试" ,
                "dialogWidth": "70%",
                "controlKey": "form",
                "openModuleId": 142,
                "formMetaId": 10,
                "actionId": 10,
                "hotkey": "a"
              },
              "20": {
                "btnTitle": "修改测试",
                "btnKind": "update",
                "dialogTitle": "修改测试" ,
                "dialogWidth": "70%",
                "controlKey": "form",
                "openModuleId": 142,
                "formMetaId": 10,
                "actionId": 20,
                "hotkey": "s"
              },
              "80": {
                "btnTitle": "测试递归",
                "btnKind": "list",
                "dialogTitle": "测试递归" ,
                "dialogWidth": "75%",
                "controlKey": "list",
                "openModuleId": 143,
                "formMetaId": 10,
                "actionId": 10,
                "hotkey": "f"
              },
              "30": {
                "btnTitle": "删除测试",
                "btnKind": "delete",
                "dialogTitle": "删除测试" ,
                "dialogWidth": "50%",
                "controlKey": "delete",
                "openModuleId": 142,
                "formMetaId": 10,
                "actionId": 30,
                "hotkey": "d"
              },
              "31": {
                "btnTitle": "删除测试2",
                "btnKind": "delete",
                "dialogTitle": "删除测试2" ,
                "dialogWidth": "50%",
                "controlKey": "delete",
                "openModuleId": 143,
                "formMetaId": 10,
                "actionId": 31,
                "hotkey": "r"
              }
            }
          }

          return {
            moduleId,
            buttonMeta,
            // 
            setMeta,
            model,
            textProps,
            drawerInfo,
            itemProps,
            message
          }
        }
      }
      const app = Vue.createApp(App)
      app  
        .use(ElementPlus)
        .use(nfUIElp.nfElementPlus) // 二次封装的组件
        .mount("#app")
    </script>
  </body>
</html>
